<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日历</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <script src="../common/cdn/lunar.js"></script>
    <style>
      :root {
        --theme-holiday-color: rgb(250, 37, 37);
        --theme-work-color: rgb(136, 135, 135);
      }

      .november-theme {
        --theme-bg: rgb(210, 213, 220);
        --theme-week-bg: rgb(104, 109, 131);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(106, 110, 128);
        --theme-select-day-bg: rgb(88, 94, 122);
        /* --theme-week-line-top:  */
      }

      .january-theme {
        --theme-bg: rgb(202, 209, 235);
        --theme-week-bg: rgb(85, 104, 163);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(94, 104, 147);
        --theme-select-day-bg: rgb(71, 81, 129);
      }

      .february-theme {
        --theme-bg: rgb(250, 219, 217);
        --theme-week-bg: rgb(217, 111, 124);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(230, 143, 153);
        --theme-select-day-bg: rgb(216, 96, 110);
      }


      .march-theme {
        --theme-bg: rgb(251, 226, 186);
        --theme-week-bg: rgb(198, 78, 67);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(212, 106, 96);
        --theme-select-day-bg: rgb(199, 62, 49);
      }


      .april-theme {
        --theme-bg: rgb(191, 224, 205);
        --theme-week-bg: rgb(74, 119, 86);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(93, 131, 103);
        --theme-select-day-bg: rgb(58, 119, 74);
      }

      .may-theme {
        --theme-bg: rgb(188, 205, 233);
        --theme-week-bg: rgb(86, 104, 166);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(107, 123, 182);
        --theme-select-day-bg: rgb(68, 89, 163);
      }

      .june-theme {
        --theme-bg: rgb(244, 179, 173);
        --theme-week-bg: rgb(209, 85, 77);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(218, 110, 102);
        --theme-select-day-bg: rgb(211, 70, 59);
      }

      .july-theme {
        --theme-bg: rgb(246, 201, 221);
        --theme-week-bg: rgb(216, 92, 142);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(223, 119, 160);
        --theme-select-day-bg: rgb(212, 66, 125);
      }


      .august-theme {
        --theme-bg: rgb(210, 204, 206);
        --theme-week-bg: rgb(93, 94, 96);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(118, 122, 129);
        --theme-select-day-bg: rgb(74, 77, 83);
      }


      .september-theme {
        --theme-bg: rgb(187, 213, 240);
        --theme-week-bg: rgb(51, 89, 134);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(80, 115, 158);
        --theme-select-day-bg: rgb(37, 75, 121);
      }

      .october-theme {
        --theme-bg: rgb(223, 231, 244);
        --theme-week-bg: rgb(120, 148, 196);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(143, 167, 209);
        --theme-select-day-bg: rgb(86, 117, 172);
      }


      .december-theme {
        --theme-bg: rgb(189, 225, 215);
        --theme-week-bg: rgb(44, 166, 171);
        --theme-week-color: rgb(255, 255, 255);
        --theme-week-dag-color: rgb(69, 180, 184);
        --theme-select-day-bg: rgb(24, 155, 160);
      }



      .calendar-view {
        background-color: var(--theme-bg);
        width: 100%;
        height: 100%;
        font-size: 3vw;
        padding: 10px;
        transition: all 0.5s linear;
      }

      .calendar-box {
        /* width: 270px; */
        display: flex;
        height: 100%;
        flex-direction: column;
      }

      .calendar-header{
        font-size: 5vw;
        padding: 1vw 2vw;
        border-bottom: 2px solid var(--theme-week-bg);
        display: flex;
        align-items: center;
        position: relative;
      }

      .calendar-header-year-month{
        width: 19vw;
        color: var(--theme-select-day-bg);
      }

      .calendar-header .calendar-forward-backward{
        margin-left: 5vw;
        display: flex;
        align-items: center;
      }

      .calendar-header .calendar-forward-backward .calendar-switch-month{
        cursor: pointer;
        font-size: 6vw;
      }
      
      .calendar-subtract-day{
        font-size: 4vw;
      }

      .calendar-header .calendar-header-to-day{
        width: 6vw;
        height: 6vw;
        font-size: 3vw;
        line-height: 6vw;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background-color: var(--theme-select-day-bg);
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        transform: scale(0);
        transition: all 0.3s;
      }


      .calendar-header .calendar-header-to-day.active-to-day{
        transform: scale(1);
      }

      .calendar-week-box {
        display: flex;
        padding: calc(1.2vw + 1.5vw) 0;
        border-bottom: 1px solid var(--theme-week-dag-color);
      }

      .calendar-day-box {
        display: flex;
        flex-wrap: wrap;
        font-weight: 700;
        /* justify-content: space-between; */
      }

      .calendar-week-item {
        width: 14.25%;
        text-align: center;
      }

      .calendar-week-item span{
        padding: 1.2vw;
      }

      .calendar-week-item .week{
        background-color: var(--theme-week-bg);
        color: var(--theme-week-color);
        border-radius: 1.2vw;
      }

      .calendar-day-item {
        width: 14.25%;
        text-align: center;
        margin: 1.2vw 0;
      }

      .calendar-day-item .select-date {
        background-color: var(--theme-select-day-bg);
        color: #fff;
        border-radius: 1.2vw;
      }

      .calendar-day-item .calendar-day-festival-item{
        /* 超出一行省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* margin-top: 0.5vw;
        font-size: 1.2vw; */
      }

      .calendar-day-record-box{
        width: 95%;
        margin: 0 auto;
        padding: 1.2vw;
        background-color: #f7f7f9;
        border-radius: 1.2vw;
        flex: 1;
      }

      .calendar-day-record{
        width: 100%;
        height: 100%;
        border: 1px dashed var(--theme-week-dag-color);
        border-radius: 1.2vw;
        outline: none;
        padding: 2vw;
      }
    </style>
  </head>
  <body>
    <div class="calendar-view april-theme">
      <div class="calendar-box">
        <div class="calendar-header">
          <div class="calendar-header-year-month"></div>
          <div class="calendar-forward-backward">
            <div class="calendar-backward calendar-switch-month"><icon-svg name="forward" ></icon-svg></div>
            <div class="calendar-subtract-day">今天</div>
            <div class="calendar-forward calendar-switch-month"> <icon-svg name="backward" ></icon-svg> </div>
          </div>
          <div class="calendar-header-to-day">今</div>
        </div>
        <div class="calendar-week-box">
          <div class="calendar-week-item"> <span class="week">星期日</span> </div>
          <div class="calendar-week-item"> <span>星期一</span> </div>
          <div class="calendar-week-item"> <span>星期二</span> </div>
          <div class="calendar-week-item"> <span>星期三</span> </div>
          <div class="calendar-week-item"> <span>星期四</span> </div>
          <div class="calendar-week-item"> <span>星期五</span> </div>
          <div class="calendar-week-item"> <span class="week">星期六</span> </div>
        </div>
        <div class="calendar-day-box"></div>
        <!-- <div class="calendar-day-record-box">
          <div class="calendar-day-record" contenteditable="plaintext-only"></div>
        </div> -->
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import IconSvg from "../components/IconSvg/IconSvg.js";
    customElements.define("icon-svg", IconSvg);

    const calendarViewEl = document.querySelector(".calendar-view");
    const calendarBoxEl = document.querySelector(".calendar-box");
    const calendarDayBoxEl = document.querySelector(".calendar-day-box");
    const calendarHeaderYearMonthEl = document.querySelector(".calendar-header-year-month")
    const calendarHeaderToDayEl = document.querySelector('.calendar-header-to-day')
    const calendarForwardEl = document.querySelector('.calendar-forward')
    const calendarBackwardEl = document.querySelector('.calendar-backward')
    const calendarSubtractDayEl = document.querySelector('.calendar-subtract-day')
    let currentDateExample = Solar.fromDate(new Date());
    let themeList = [
      {
        name: 'january-theme',
        themeColor: '#cad1eb'
      },
      {
        name: 'february-theme',
        themeColor: '#fadbd9'
      },
      {
        name: 'march-theme',
        themeColor: '#fbe2ba'
      },
      {
        name: 'april-theme',
        themeColor: '#bfe0cd'
      },
      {
        name: 'may-theme',
        themeColor: '#bccde9'
      },
      {
        name: 'june-theme',
        themeColor: '#f4b3ad'
      },
      {
        name: 'july-theme',
        themeColor: '#f6c9dd'
      },
      {
        name: 'august-theme',
        themeColor: '#d2ccce'
      },
      {
        name: 'september-theme',
        themeColor: '#bbd5f0'
      },
      {
        name: 'october-theme',
        themeColor: '#dfe7f4'
      },
      {
        name: 'november-theme',
        themeColor: '#d2d5dc'
      },
      {
        name: 'december-theme',
        themeColor: '#bde1d7'
      },
    ]
    let data = {}

    let date = {
      currentDate: currentDateExample.toString(),
      selectDate: currentDateExample.toString(),
      year: currentDateExample.getYear(),
      month: currentDateExample.getMonth(),
      day: currentDateExample.getDay(),
    };

    if(window.ipcRenderer){
      window.ipcRenderer.on("init", (event, res) => {
        data = res ? res : {};
        calendarViewEl.className = 'calendar-view ' + (res.theme ? res.theme : 'april-theme');
      })

      window.ipcRenderer.on( "setTheme", (event, name)=>{
        data.theme = name;
        calendarViewEl.className = 'calendar-view ' + name;
        window.sendSaveData(data);
      });
    }

    const resetDate = () => {
      currentDateExample = Solar.fromDate(new Date());
      date.currentDate = currentDateExample.toString();
      date.selectDate = currentDateExample.toString();
      date.year = currentDateExample.getYear();
      date.month = currentDateExample.getMonth();
      date.day = currentDateExample.getDay();
    }

    const subtractNum = (year,month,day) => {
      let currentDate = Solar.fromDate(new Date());
      let selectDate = Solar.fromYmd(year, month, day)
      let subtractDay = currentDate.subtract(selectDate);
      if(subtractDay > 0){
        calendarSubtractDayEl.innerText = subtractDay + '天前';
      }else if(subtractDay < 0){
        calendarSubtractDayEl.innerText = Math.abs(subtractDay) + '天后';
      }else{
        calendarSubtractDayEl.innerText = '今天';
      }
    }

    const daysRender = () => {
      let d = SolarMonth.fromYm(date.year, date.month);
      let days = d.getDays();
      calendarDayBoxEl.innerHTML = "";
      
      calendarHeaderYearMonthEl.innerText = `${date.year}.${date.month}`

      if(date.selectDate !== date.currentDate){
        calendarHeaderToDayEl.classList.add('active-to-day')
      }else{
        calendarHeaderToDayEl.classList.remove('active-to-day')
      }

      days.forEach((item, index) => {
        if (index === 0) {
          let week = item.getWeek();
          for (let index = 0; index < week; index++) {
            const calendarDayItemEl = document.createElement("div");
            calendarDayItemEl.className = "calendar-day-item";
            calendarDayBoxEl.appendChild(calendarDayItemEl);
          }
        }
        const itemEL = document.createElement("div");
        const calendarDayItemLayoutEl = document.createElement("div");
        itemEL.className = "calendar-day-item";
        calendarDayItemLayoutEl.className = "calendar-day-item-layout";

        let info = {};
        // 阳历
        info.solarDay = item.getDay();
        info.solarFestivals = item.getFestivals();
        info.solarYear = item.getYear();
        info.solarMonth = item.getMonth();
        info.currentDate = item.toString();

        // 阴历
        let lunar = item.getLunar();
        info.lunarDay = lunar.getDayInChinese();
        info.lunarFestivals = lunar.getFestivals();
        info.jieQi = lunar.getJieQi();
        info.shengXiao = lunar.getYearShengXiao();

        // 其他
        info.week = item.getWeek();
        info.weekChinese = item.getWeekInChinese();
        let holiday = HolidayUtil.getHoliday(info.solarYear,info.solarMonth,info.solarDay);
        if(holiday){
          let bool = holiday.isWork();
          info.holiday = true;
          info.work = bool;
        }

        calendarDayItemLayoutEl.setAttribute("data-info", JSON.stringify(info));

        const festivalsRender = () => {
          let html = "";
          if (info.lunarFestivals.length) {
            html += `<div class="calendar-day-festival-item" title="${info.lunarFestivals[0]}">${info.lunarFestivals[0]}</div>`;
            return html;
          }
          if (info.solarFestivals.length) {
            html += `<div class="calendar-day-festival-item" title="${info.solarFestivals[0]}">${info.solarFestivals[0]}</div>`;
            return html;
          }

          return `<div class="calendar-day-lunar-item">${info.lunarDay}</div> `;
        };

        if (info.currentDate === date.selectDate){calendarDayItemLayoutEl.classList.add("select-date");}
          
        if(info.week === 0 || info.week === 6){itemEL.style.color = 'var(--theme-week-dag-color)';}
        if(info.holiday){
          itemEL.style.color = 'var(--theme-holiday-color)';
          itemEL.title = '休';
        }
        if(info.work){
          itemEL.style.color = 'var(--theme-work-color)';
          itemEL.title = '补';
        }
        calendarDayItemLayoutEl.innerHTML = `
            <div class="calendar-day-solar-item">${info.solarDay}</div>
            ${festivalsRender()}
          `;
        calendarDayItemLayoutEl.addEventListener("click", window.triggerHandle((e) => {
          const info = e.currentTarget.getAttribute("data-info");
          if (info) {
            const obj = JSON.parse(info);
            date.month = obj.solarMonth;
            date.day = obj.solarDay;
            date.selectDate = obj.currentDate;
           
            daysRender()
            subtractNum(obj.solarYear, obj.solarMonth, obj.solarDay)
          }
        }));
        
        itemEL.appendChild(calendarDayItemLayoutEl);
        calendarDayBoxEl.appendChild(itemEL);
      });
    };


    const step = () => {
      requestAnimationFrame(() => {
        if (date.currentDate !== Solar.fromDate(new Date()).toString()) {
          resetDate();
          daysRender();
        }
        step()
      });
    };


    step();
    daysRender();

    calendarHeaderToDayEl.addEventListener("click", window.triggerHandle( () => {
      resetDate();
      daysRender();
      calendarSubtractDayEl.innerText = '今天';
    }));

    calendarForwardEl.addEventListener("click", window.triggerHandle(() => {
      date.selectDate = ''
      if(date.month == 12){
        date.month = 1;
        date.year += 1;
      }else{
        date.month += 1;
      }
      daysRender()
    }));

    calendarBackwardEl.addEventListener("click", window.triggerHandle(() => {
      date.selectDate = ''
      if(date.month == 1){
        date.month = 12;
        date.year -= 1;
      }else{
        date.month -= 1;
      }
      daysRender()
    }));

    window.getData = ()=>data

  </script>
</html>
